<div class="panel-heading">修改密保问题</div>
<div class="panel-body">

  <div class="secure-forms">
    <ul class="nav rc-nav-wizard">
      <li ng-class="{'active':!currentVertifyStatus && !newVertifyStatus}">
        <a href="javascript:;" data-toggle="tab">
          <span class="badge">1</span>
          <span>验证当前密保</span>
        </a>
      </li>
      <li ng-class="{'active':currentVertifyStatus && !newVertifyStatus}">
        <a href="javascript:;" data-toggle="tab">
          <span class="badge">2</span>
          <span>更换密保问题</span>
        </a>
      </li>
      <li ng-class="{'active':currentVertifyStatus && newVertifyStatus}">
        <a href="javascript:;" data-toggle="tab">
          <span class="badge">3</span>
          <span>完成</span>
        </a>
      </li>
    </ul>
    <div class="tab-content">

      <form class="tab-pane form-horizontal" name="vertifySecretForm" ng-submit="vertifyQes(vertifySecretForm)" ng-class="{'active':!currentVertifyStatus && !newVertifyStatus}">

        <div class="form-group" ng-class="{'has-error': vertifySecretForm.secretOption.$invalid && vertifySecretForm.secretOption.$dirty}">
          <label class="control-label col-xs-3">当前密保验证</label>
            <div class="col-xs-6">
              <select class="form-control" name="secretOption"
                      ng-options="qes.id as qes.title for qes in qesOpts" ng-required="true" ng-model="secret.question">
                <option value="">请选择</option>
              </select>
            </div>
        </div>

        <div class="form-group" ng-class="{'has-error': vertifySecretForm.answer.$invalid && vertifySecretForm.answer.$dirty}">
          <label for="answer" class="col-xs-3 control-label">答案：</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" id="answer" placeholder="答案" name="answer" remote-validate="used"
                   ng-model="secret.answer" ng-required="true" />
            <span class="help-block alert-danger alert slide-down" ng-show="vertifySecretForm.answer.$error.used">
                <b>错误：</b>密保回答错误
              </span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-9">
            <button class="btn btn-primary" ng-disabled="vertifySecretForm.$invalid || vertifySecretForm.$pristine || cuProcessing">下一步 <i class="fa fa-spin fa-repeat" ng-show="cuProcessing"></i> </button>
          </div>
        </div>

      </form>

      <form class="tab-pane form-horizontal" id="second" name="newSecretForm" ng-submit="changeSecret()" ng-class="{'active':currentVertifyStatus && !newVertifyStatus}">

        <div class="form-group" ng-class="{'has-error': newSecretForm.newSecretOption.$invalid && newSecretForm.newSecretOption.$dirty}">
          <label class="control-label col-xs-3">设置新密保</label>
          <div class="col-xs-6">
            <select class="form-control" name="newSecretOption"
                    ng-options="qes.id as qes.title for qes in qesOpts" ng-required="true" ng-model="newSecret.question">
              <option value="">请选择</option>
            </select>
          </div>
        </div>

        <div class="form-group" ng-class="{'has-error': newSecretForm.newAnswer.$invalid && newSecretForm.newAnswer.$dirty}">
          <label for="newAnswer" class="col-xs-3 control-label">回答：</label>
          <div class="col-xs-9">
            <input type="text" class="form-control" id="newAnswer" placeholder="答案" name="newAnswer"
                   ng-model="newSecret.answer" ng-required="true" />
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-9">
            <button class="btn btn-primary" ng-disabled="newSecretForm.$invalid || newSecretForm.$pristine || newProcessing">确定 <i class="fa fa-spin fa-repeat" ng-show="newProcessing"></i></button>
          </div>
        </div>

      </form>


      <form class="tab-pane form-horizontal" ng-class="{'active':currentVertifyStatus && newVertifyStatus}">
        <div class="form-group secure-forms">
          <div class="col-xs-offset-1 col-xs-11">
            <div class="media">
              <a class="pull-left" href="#">
                <i class="fa fa-check-circle fa-size-md2 text-success"></i>
              </a>
              <div class="media-body">
                <h3 class="media-heading text-success">更换密保问题成功！</h3>
                <span class="help-block">请您牢记问题答案，必要时可快速找回支付密码。</span>
                <p><button ui-sref="site.account.secure" class="btn btn-primary">返回安全中心</a></button></p>
              </div>
            </div>

          </div>
        </div>
      </form>

    </div>
  </div>

</div>
